<template>
  <div>
    <!-- 输入的值 -->
    <input v-model="inputValue" />
    <!-- 展示 -->
    <!-- <div>{{ inputValue }}</div> -->
    <!-- 点击这个按钮，就可以清空这个值 -->
    <button @click="reset">点我</button>
    <div>
      所有留言:
      <div v-for="(item, index) in list" :key="index">
        {{ item }}
      </div>
    </div>
    <button @click="addMessage">提交</button>
  </div>
</template>
<script>
// vue =>    data => 视图
export default {
  data() {
    return {
      inputValue: "",
      list: [],
    };
  },
  methods: {
    reset() {
      //清空值
      this.inputValue = "";
    },
    addMessage() {
      // 拿到输入的值
      //   this.inputValue = "gdfghsfhd";
      this.list.push(this.inputValue);
      this.inputValue = "";
    },
  },
};
</script>

<!-- 

    表单输入控件也就是元素:
        input: 输入框，选择，上传文件

 -->

<!-- 
    <input />
    dom 
        1： 获取到这个输入框
        2： 通过这个输入框拿到这个值  => 拿数据就可以
        3. 把这个值作为我们要展示的dom的innerText
    vue： 



 -->
<!-- 


    以后：你不是用在关心dom也就是Input，永远
    //   this.inputValue// 最新的数据
    只要关心你的数据就可以了

 -->

<!-- 
    数据双向绑定：


        数据： data 里面的这个数据
        双向: 
        就有两个对比方：
            data <======> 视图
            如果data发生改变,
                    那么视图自动监听到这个改变，他会自己发生改变(更新)
            反之亦然。
        
 -->
